<template>
	<view class="con mt30 ">
		<view class="bgfff pg0-30 ra30 ">
			
			<view class="flex-ju-b height100">
				<view v-if="type==1">复习提示显示单词图片</view>
				<view v-else>复习提示显示词根图片</view>
				<view>
					<switch @change="change1" :checked="info.isCard" color="#FD2F55" />
				</view>
			</view>
			<view v-if="type==1" class="flex-ju-b height100">
				<view v-if="type==1">复习提示显示单词例句</view>
				<view v-else>复习提示显示词根例句</view>
				<view>
					<switch @change="change2" :checked="info.isSentence" color="#FD2F55" />
				</view>
			</view>
			
			<view v-if="type==2" class="flex-ju-b height100">
				<view v-if="type==1">复习提示显示释义</view>
				<view v-else>复习提示系列词</view>
				<view>
					<switch @change="change3" :checked="info.isSeriesWord" color="#FD2F55" />
				</view>
			</view>
		</view>
		<view class="bgfff pg0-30 ra30 mt20">
			<view  @click="tapdan(1)" class="flex-ju-b height100 size28">
				<view >认识的{{type==1?'单词':'词根'}}</view>
				<view class="color999">
					{{info.knowWord}}天后出现<uni-icons type="right" color="#999"></uni-icons>
				</view>
			</view>
			<view  @click="tapdan(2)" class="flex-ju-b height100 size28">
				<view>已斩{{type==1?'单词':'词根'}}</view>
				<view class="color999">
					{{info.collectionWord}}天后出现<uni-icons type="right" color="#999"></uni-icons>
				</view>
			</view>
		</view>
		<uni-popup ref="updanci" type="bottom" background-color="#fff" border-radius="20px 20px 0px 0">
			<view class="con pt40 " :style="{paddingBottom:bhh+'px'}">
				<view class="flex-ju-b">
					<view v-if="type==2" class="size36 bold">
						{{atype==1?'认识的词根':'已斩词根'}}
					</view>
					<view v-else class="size36 bold">
						{{atype==1?'认识的单词':'已斩单词'}}
					</view>
					<view @click="$refs.updanci.close()">
						<image mode="widthFix" src="/static/closes.png" class="image width64"></image>
						<!-- <uni-icons type="closeempty" size="20"></uni-icons> -->
					</view>
				</view>
			</view>
			<view class="flex-a-i">
				<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item" @click="tapsrue(item,index)" v-for="(item,index) in 30" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>
				<view class="posiab color666 right60 mt15">
					天复习时后出现
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorStyle: `height: 50px;width:0px`,
				tian:"",
				value:[],
				type:"",
				atype:"",
				info:{}
			}
		},
		onLoad(option) {
			this.type=option.type
			if(option.type==1){
				uni.setNavigationBarTitle({
				  title: "单词复习设置",
				});
			}else{
				uni.setNavigationBarTitle({
				  title: "词根复习设置",
				});
			}
			this.http('/api/review',{reviewType:option.type}).then(res=>{
				this.info = res.data
				this.value[0]=res.data.knowWord-1
			})
		},
		mounted() {
			
		},
		methods: {
			tapsrue(item,index){
				if(index == this.tian){
					this.srue()
				}
			},
			bindChange(e){
				this.tian=e.detail.value[0]
			},
			tapdan(type){
				this.atype=type
				if(type==1){
					this.value = [this.info.knowWord-1]
					this.value.push(new Date().getTime())
				}else{
					this.value = [this.info.collectionWord-1]
					this.value.push(new Date().getTime())
				}
				this.$refs.updanci.open()
			},
			srue(){
				if(this.atype == 1){
					this.setreview({
						knowWord:this.tian+1
					}).then(res=>{
						this.value[0]=this.tian
						this.info.knowWord = this.tian+1
						
						this.$refs.updanci.close()
					})
				}else{
					this.setreview({
						collectionWord:this.tian+1
					}).then(res=>{
						this.value[0]=this.tian
						this.info.collectionWord=this.tian+1
						this.$refs.updanci.close()
					})
				}
			},
			change1(e){
				this.setreview({
					isCard:e.detail.value
				})
			},
			change2(e){
				this.setreview({
					isSentence:e.detail.value
				})
			},
			change3(e){
				this.setreview({
					isSeriesWord:e.detail.value
				})
			},
			setreview(data){
				data.id = this.info.id
				return new Promise((resolve, reject)=> {
					this.http('/api/review',data,'put').then(res=>{
						this.toast('设置成功')
						resolve(res)
					})
				})
				
			}
		}
	}
</script>

<style>
	page{
		background: #F3F5F7;
	}
	.picker-view {
		width: 750rpx;
		height: 500rpx;
		margin-top: 20rpx;
	}
	.item {
		line-height: 100rpx;
		text-align: center;
	}
</style>
